<template>
  <div
    class="echarts"
    id="timeecharts"
    ref="chartRef"
    style="width: 100%; height: 250px;"
  ></div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts/core";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  ToolboxComponent,
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import type { PieSeriesOption } from "echarts/charts";
import { BarChart, LineChart } from "echarts/charts";
import type {
  TitleComponentOption,
  TooltipComponentOption,
  GridComponentOption,
  LegendComponentOption,
  ToolboxComponentOption,
} from "echarts/components";
import type { ComposeOption } from "echarts/core";

type ECOption = ComposeOption<
  | PieSeriesOption
  | TitleComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | LegendComponentOption
  | ToolboxComponentOption
>;

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  ToolboxComponent,
  PieChart,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
]);

const chartRef = ref<HTMLElement | null>(null);
const props = defineProps<{
  bar_list: [];
  bar_listdata: [];
}>();
onMounted(() => {
 
  if (chartRef.value) {
    const chart = echarts.init(chartRef.value);
    // There should not be negative values in rawData
    const rawData = [props.bar_listdata];
    const totalData = [];
    for (let i = 0; i < rawData[0].length; ++i) {
      let sum = 0;
      for (let j = 0; j < rawData.length; ++j) {
        sum += rawData[j][i];
      }
      totalData.push(sum);
    }

    const grid = {
      left: 50,
      right: 100,
      top: 50,
      bottom: 40,
    };
    // 定义颜色的深浅范围，这里以蓝色为例
    const lightColor = "#AED2F8";
    const darkColor = "#0375F9";

    const getColor = (value: any, min: any, max: any) => {
      const ratio = (value - min) / (max - min);
      const r1 = parseInt(lightColor.slice(1, 3), 16);
      const g1 = parseInt(lightColor.slice(3, 5), 16);
      const b1 = parseInt(lightColor.slice(5, 7), 16);
      const r2 = parseInt(darkColor.slice(1, 3), 16);
      const g2 = parseInt(darkColor.slice(3, 5), 16);
      const b2 = parseInt(darkColor.slice(5, 7), 16);
      const r = Math.round(r1 + (r2 - r1) * ratio);
      const g = Math.round(g1 + (g2 - g1) * ratio);
      const b = Math.round(b1 + (b2 - b1) * ratio);
      return `#${r.toString(16).padStart(2, "0")}${g
        .toString(16)
        .padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
    };

    const minValue = Math.min(...rawData[0]);
    const maxValue = Math.max(...rawData[0]);

    // const barColors1 = ["#AED2F8", "#4BA0F7", "#7CBAF7", "#0375F9", "#AED2F8"];
    // const seriesColors = ["#5AD8A6", "#5B8FF9 "]; // 定义每个系列对应的颜色
    const series = [
      {
        //   name: 'Data 1',
        type: "bar",
        label: {
          show: true,
          position: "right", // 将数值显示在柱子顶部
          formatter: function (params) {
        return params.value + 'h'; // 在标签显示时进行拼接
      }
        },
        data: rawData[0].map((value, index) => ({
          // value: `${value}h`, // 拼接 'h' 到 value 后面
          value,
          itemStyle: {
            color: getColor(value, minValue, maxValue),
          },
        })),
      },
    ];
    const option = {
      legend: {
        right: "10%", // 距离图表右侧 10% 的位置
      },
      tooltip: {
        trigger: "item",
      },
      //   yAxis: {
      //     //   min: 0, // 若需要可以设置最小值，这里设置为 0
      //     max: 100, // 设置 y 轴的最大值为 100
      //   },
      title: {
        text: "本周学习时长",
      },
      grid,
      xAxis: {
        type: "value",
        // max: 100,
        // axisLine: {
        //   show: false
        // },
        axisLine: {
          show: false, // 隐藏 x 轴轴线
        },
        axisTick: {
          show: false, // 隐藏 x 轴刻度线
        },
        splitLine: {
          show: false, // 隐藏 x 轴网格线
        },
        axisLabel: {
          show: false, // 隐藏 x 轴的刻度标签
        },
      },
      yAxis: {
        type: "category",
        data: [
          "星期日",
          "星期六",
          "星期五",
          "星期四",
          "星期三",
          "星期二",
          "星期一",
        ],
        axisLine: {
          show: false, // 隐藏 x 轴轴线
        },
        axisTick: {
          show: false, // 隐藏 x 轴刻度线
        },
        splitLine: {
          show: false, // 隐藏 x 轴网格线
        },
      },
      // yAxis: {
      //   // type: 'value',
      //   // max: 100 // 设置 y 轴的最大值为 100
      // },
      //   xAxis: {
      //     type: "category",
      //     data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
      //   },
      series,
    };
    const chartDom = document.getElementById("timeecharts");
    if (chartDom) {
      const myChart = echarts.init(chartDom);
      myChart.setOption(option);
      // 监听窗口大小变化事件
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
    chart.setOption(option);
  }
});
</script>
<style lang="less" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
